<!--
  新增type类型
  type: yearrange  年区间
  type: quartrange 季度区间
-->
<template>
<div>
  <template v-if="type !== 'yearrange' && type !== 'quartrange'">
    <date-picker
      v-bind="$attrs"
      :type="type"
      :value-format="valueFormat" 
      :start-placeholder="startPlaceholder" 
      :end-placeholder="endPlaceholder" 
      :placeholder="placeholder"
      v-on="$listeners">
    </date-picker>
  </template>
  <template v-if="type === 'yearrange'">
    <YearRange 
      v-bind="$attrs" 
      :value-format="valueFormat" 
      :start-placeholder="startPlaceholder" 
      :end-placeholder="endPlaceholder" 
      :placeholder="placeholder"
      v-on="$listeners"/>
  </template>
  <template v-if="type === 'quartrange'">
    <QuarterRange 
      v-bind="$attrs" 
      :value-format="valueFormat" 
      :start-placeholder="startPlaceholder" 
      :end-placeholder="endPlaceholder" 
      :placeholder="placeholder"
      v-on="$listeners"/>
  </template>
</div>
</template>
<script>
import { DatePicker } from 'element-ui'
import YearRange from './YearRange.vue'
import QuarterRange from './QuarterRange.vue'
export default {
  inheritAttrs: false,
  components: {
    DatePicker,
    YearRange,
    QuarterRange
  },
  props: {
    type: {
      type: String,
      default: 'date'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    placeholder: {
      type: String,
      default: '选择日期'
    },
  },
  // extends: window.ELEMENT.DatePicker
}
</script>